{include file="./common/_header"}

<head>
    <link rel="stylesheet" href="/static/admin/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/admin/css/ace.min.css">
    <link rel="stylesheet" href="/static/admin/css/datepicker.css">
    <script src="http://familyset.jiazhengdashi.com/assets/admin/js/jquery-2.1.4.min.js"></script>
    <script src="/static/admin/js/bootstrap.min.js"></script>
    <script src="/static/admin/js/echarts.min.js"></script>
    <script src="/static/admin/js/datepicker.min.js"></script>
    <script src="/static/admin/js/datepicker.zh-CN.js"></script>
</head>

<body>
    <!-- {|include 'common/navbar.html'|} -->
    <div class="main-container ace-save-state" id="main-container">
        <!-- {|include 'common/sidebar.html'|} -->
        <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div class="widget-box">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title">营收总汇（￥<span id="confluence"></span>）</h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-8">
                                    <div id="income" style='height:300px;'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="widget-box">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title">用户统计（<span id="userStatistics"></span>）</h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-8">
                                    <div id="usercount" style='height:300px;'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--<div class="col-xs-12 col-sm-4">-->
                    <!--<div class="widget-box">-->
                    <!--<div class="widget-header widget-header-flat">-->
                    <!--<h4 class="widget-title">提现</h4>-->
                    <!--</div>-->
                    <!--<div class="widget-body">-->
                    <!--<div class="widget-main padding-8">-->
                    <!--<ul>-->
                    <!--<p>提现比率： <span class="red2 bigger-200">{|$fee_ratio|default:'0%'|}</span></p>-->
                    <!--<p>可提现： <span class="red2 bigger-200">￥{|$money|default:'0.00'|}</span></p>-->
                    <!--</ul>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--</div>-->
                </div>
                <div class="hr hr12 dotted"></div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12">
                        <div class="clearfix">
                            <div class="grid3">
                                <span class="bigger-175 red">今日收入：￥<span id="allday"></span></span>
                            </div>
                            <div class="grid3">
                                <span class="bigger-175 red">新增用户：<span id="alluser"></span></span>
                            </div>
                            <!-- <div class="grid3">
                                <span class="bigger-175 red">今日已提现：￥0.00</span>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="hr hr12 dotted"></div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div class="widget-box">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title">月营收统计</h4>
                                <!--
									<div class="widget-toolbar">
										<a class="btn btn-xs btn-light">
											导出Excel
										</a>
									</div>
									-->
                                <div class="widget-toolbar">
                                    <form id="formLstu">
                                        月份：<input name="month" value="" type="text"
                                            class="input-sm input-small date-picker" id="date-picker1"
                                            data-date-format="yyyy-mm" />
                                    </form>
                                </div>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-8">
                                    <div id="ydchart" style='height:300px;'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="widget-box">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title">年营收统计</h4>
                                <div class="widget-toolbar">
                                    <form id="formLstu2">
                                        <!-- <input type="hidden" name="yjn" value="3" /> -->
                                        年份：<input name="year" value="" type="text"
                                            class="input-sm input-small date-picker" id="date-picker2"
                                            data-date-format="yyyy" />
                                    </form>
                                </div>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-8">
                                    <div id="ydchart2" style='height:300px;'></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="col-xs-12 col-sm-12">
                        <div class="widget-box">
                            <div class="widget-header widget-header-flat">
                                <h4 class="widget-title">教学点每日汇总</h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main no-padding">
                                    <table class="table table-striped table-bordered table-hover dataTable no-footer">
                                        <thead>
                                            <tr>
                                                <th>教学点名称</th>
                                                <th>负责人</th>
                                                <th>今日营收</th>
                                                <th>新增用户</th>
                                                <th>今日提现</th>
                                            </tr>
                                        </thead>
                                        <tbody data-name="loadsbglist">
                                            <tr>
                                                <td colspan="6">数据读取中...</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
                <!--
					<hr>
					<div class="row">
						<div class="col-xs-12">
							<table class="table table-striped table-bordered table-hover dataTable no-footer">
								<thead>
									<tr>
										<th>子平台</th>
										<th>子机构</th>
										<th>用户名</th>
										<th>订单</th>
										<th>金额</th>
										<th>商品</th>
										<th>下单日期</th>
										<th>支付日期</th>
										<th>买家附言</th>
									</tr>
								</thead>

								<tbody>
									{|if $datalist|}
									{|foreach($datalist as $val)|}
									<tr>
										<td>{|$spf_arr[$val['spf_id']]|}</td>
										<td>{|$sbg_arr[$val['sbg_id']]|}</td>
										<td>{|$val['user_name']|}</td>
										<td>
											订单号：{|$val['order_id']|}<br>
											订单类型：{|if $val['order_type']==1|}团购{|/if|}{|if $val['order_type']==2|}单人{|/if|}<br>
											订单状态：{|$order_status[$val['order_status']]|}<br>
											支付状态：{|if $val['pay_status']==1|}待支付{|/if|}{|if $val['pay_status']==2|}已支付{|/if|}<br>
										</td>
										<td>
											购买单价：{|$val['price']|}<br>
											购买数量：{|$val['buy_num']|}<br>
											订单总额：{|$val['order_amount']|}<br>
											支付总额：{|$val['total_amount']|}<br>
										</td>
										<td>
											商品编号：{|$val['product_id']|}<br>
											商品名称：{|$val['name']|}<br>
											商品单价：{|$val['price']|}<br>
										</td>
										<td>{|$val['add_time']|dateformat|}</td>
										<td>{|$val['pay_time']|dateformat|}</td>
										<td style="word-break: break-all;">{|$val['user_note']|}</td>
									</tr>
									{|/foreach|}
									{|else|}
									<tr>
										<td colspan="9">暂无数据</td>
									</tr>
									{|/if|}
								</tbody>
							</table>
						</div>
					</div>
					-->
            </div>
        </div>
    </div>
    <script>
        jQuery(function ($) {
            $('.scrollable').each(function () {
                var $this = $(this);
                $(this).ace_scroll({
                    size: $this.attr('data-size') || 310,
                });
            });
            const year = new Date().getFullYear()
            let month = new Date().getMonth() + 1
            month = month < 10 ? `0${month}` : month
            $('#date-picker1').val(`${year}-${month}`)
            $('#date-picker2').val(year)
            // dynamicLoading('loadsbglist.html', "", "yes", "GET");
            //  月营收统计
            var myChart = echarts.init(document.getElementById('ydchart'));
            var option = {
            };
            var loadpie = function () {
                myChart.showLoading();
                $.post("/main/month", $("form#formLstu").serialize(), function (data) {
                    let result = data.data
                    myChart.hideLoading();
                    myChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        legend: {
                            data: ['服务', '商城']
                        },
                        xAxis: {
                            data: result.day
                        },
                        yAxis: {
                            type: 'value',
                            name: '金额（元）',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        series: [{
                            name: '服务',
                            type: 'line',
                            data: result.service
                        }, {
                            name: '商城',
                            type: 'line',
                            data: result.order
                        }]
                    });
                }, 'json');
            };
            loadpie();
            $('#date-picker1').datepicker({
                autoclose: true,
                todayHighlight: true,
                startView: 1,
                minViewMode: 1,
                language: 'zh-CN'
            }).on('hide', function (e) {
                loadpie();
            });

            //  年营收统计
            var myChart2 = echarts.init(document.getElementById('ydchart2'));
            var option = {
            };
            var loadpie2 = function () {
                myChart2.showLoading();
                $.post("/main/year", $("form#formLstu2").serialize(), function (data) {
                    let result = data.data
                    myChart2.hideLoading();
                    myChart2.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            feature: {
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },
                                restore: { show: true },
                                saveAsImage: { show: true }
                            }
                        },
                        legend: {
                            data: ['服务', '商城', '平台', '利润']
                        },
                        xAxis: {
                            data: result.data
                        },
                        yAxis: {
                            type: 'value',
                            name: '金额（元）',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        series: [{
                            name: '服务',
                            type: 'line',
                            data: result.order
                        }, {
                            name: '商城',
                            type: 'line',
                            data: result.service
                        }]
                    });
                }, 'json');
            };
            loadpie2();
            $('#date-picker2').datepicker({
                autoclose: true,
                todayHighlight: true,
                startView: 0,
                minViewMode: 2,
                language: 'zh-CN'
            }).on('hide', function (e) {
                loadpie2();
            });
            // 营收总汇
            $.get("/main/statistics", function (data) {
                let result = data.data
                // $('#alluser').val(result.alluser || 0)
                document.querySelector('#allday').innerHTML = result.allday || '0.00'
                document.querySelector('#alluser').innerHTML = result.alluser || 0
                //总营收饼图
                var incomeChart = echarts.init(document.getElementById('income'));
                document.querySelector('#confluence').innerHTML = result.order || '0.00'
                incomeChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: ￥{c} ({d}%)"
                    },
                    series: [
                        {
                            name: '总营收',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 'bold'
                                    }
                                },
                                normal: {
                                    formatter: '{b|{b}：}￥{c}  {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [
                                { value: result.order, name: ' 商城' },
                                { value: result.service, name: ' 服务' },
                                // {value:{|$tj['pt_money']|default:0|}, name:'拼团'},
                                // {value:{|$tj['zg_money']|default:0|}, name:'商城'}
                            ]
                        }
                    ]
                });

                //用户统计
                var usercountChart = echarts.init(document.getElementById('usercount'));
                document.querySelector('#userStatistics').innerHTML = result.user || 0
                usercountChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    series: [
                        {
                            name: '用户统计',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                emphasis: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 'bold'
                                    }
                                },
                                normal: {
                                    formatter: '{b|{b}：}{c}  {per|{d}%}  ',
                                    backgroundColor: '#eee',
                                    borderColor: '#aaa',
                                    borderWidth: 1,
                                    borderRadius: 4,
                                    rich: {
                                        b: {
                                            fontSize: 16,
                                            lineHeight: 33
                                        },
                                        per: {
                                            color: '#eee',
                                            backgroundColor: '#334455',
                                            padding: [2, 4],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            color: ['#d48265'],
                            data: [
                                { value: result.user, name: ' 会员' },
                                // { value: 7345, name: '老师' },
                                // { value: 1143, name: '家长' },
                                // { value: 8356, name: '意向用户' }
                            ]
                        }
                    ]
                });
            })
        });
    </script>
</body>